<!doctype html>
<html lang="en">
        <head>
                <meta charset="utf-8"/>
                <title>Cairo, Egypt</title>
                <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
        </head> 
        <body onLoad="parent.loadPage( 'Cairo, Egypt' );javascript:parent.subtractTravel()">
                
                        <header>
                                <h1> Cairo, Egypt </h1>
                        </header>
                         <section>
                       <div id="main-content">
                                <div class="column">
                                        <article>
                      <header>
          <h2>Flag of Egypt</h2>
          
  <img src="images/egyptflag.jpg" alt="Flag" title="Flag" height="130" width="190"/>
  </header>
  </article>
      </div>
                               <div class="column">
  <article>
           <header>
  <h2>Cairo</h2>
  <img src="images/cairo.jpg" alt="Ciro" title="Ciro" height="130" width="190"/>
   </header>
 </article>
   </div>
   </div>
    </section>
    
    <h2>
    Fact about Cairo:
    </h2>
     <span id="bankroll" ></span>

		
   <p>Cairo has a rich and a glorious history for the seat of ancient Egyptian civilization and tradition. </p>
                        <aside id="travel">
                                <h2 class="header-button" onClick="javascript:parent.showDestinations()">Travel</h2>
                                <div id="destinations">
                                </div>
                        </aside>
                        <aside id="investigate">
                                <h2 class="header-button" onClick="javascript:parent.showClue()">Investigate</h2>
                                <div id="clue">
                                </div>
                        </aside>
        </body>
</html>